<script setup lang="ts">
defineProps<{
  selectedIndex: number
  items: string[]
}>()

defineEmits(['change'])
</script>

<template>
  <view class="flex items-center">
    <view
      v-for="item, index in items"
      :key="item" class="flex items-center justify-center py-14rpx"
      :style="{
        width: `${1 / items.length * 100}%`,
        color: index === selectedIndex ? '#3F8BF6' : '#333333',
        borderBottom: index === selectedIndex ? '3px solid #3F8BF6' : '3px solid rgba(0, 0, 0, 0)',
      }"
      @tap="$emit('change', index)"
    >
      {{ item }}
    </view>
  </view>
</template>
